---
title: Identifying Imagery
description: Display an Image Service from ArcGIS Online or ArcGIS Server and get the pixel value at a specific location. This sample displays a digital elevation model (DEM) for the state of California rendered with a hillshade (see <a href="/esri-leaflet/examples/image-map-layer-rendering-rule.html">ImageMapLayer RenderingRule sample</a>). Clicking on map returns the raw DEM value for that location (elevation in meters). More information about Image Services can be found in the <a href="/esri-leaflet/api-reference/tasks/identify-image.html">L.esri.IdentifyImage</a> documentation.
layout: example.hbs
---

<style>
  #pixelValue {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    padding: 1em;
  }
</style>

<div id="map"></div>
<div id="pixelValue" class="leaflet-bar">Click map for elevation</div>

<script>
    var renderingRule = {
        "rasterFunction":"Hillshade",
        "rasterFunctionArguments": {
            "Azimuth":215,
            "Altitude":60,
            "ZFactor":1
        },"variableName":"DEM"
    };

    // sample server in this example is not CORS enabled, so use JSONP
    L.esri.get = L.esri.get.JSONP;

    var map = L.map('map').setView([36.230577, -118.253147], 10);

    var hillshade = L.esri.imageMapLayer({
      url: 'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/CaliforniaDEM/ImageServer',
      renderingRule: renderingRule,
      useCors: false
    }).addTo(map);

    var identifiedPixel;
    var pane = document.getElementById('pixelValue');

    map.on('click', function (e) {
        if(identifiedPixel){
            pane.innerHTML = 'Loading';
        }
        hillshade.identify().at(e.latlng).run(function(error, results){
            identifiedPixel = results.pixel;
            pane.innerHTML = identifiedPixel.properties.value + 'm';
        });
    });

</script>
